<script setup>
import { onPageScroll } from "@dcloudio/uni-app";
import { computed, defineProps } from "vue";

const props = defineProps({
  color: {
    type: String,
    default: "#000",
  },
  navbarStyle: {
    type: [String, Object],
    default: () => {},
  },
  navbarBgColor: {
    type: String,
    default: "#fff",
  },
  pageBgColor: {
    type: String,
    default: "",
  },
  backgroundColor: {
    type: String,
    default: "transparent",
  },
  isImmerse: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  navBarShow: {
    type: Boolean,
    default: true,
  },
  navCustomStyle: {
    type: [String, Object],
    default: () => {},
  },
  backShow: {
    type: Boolean,
    default: true,
  },
  isInNavbar: {
    type: Boolean,
    default: true,
  },
  layoutStyle: {
    type: Object,
    default: () => {},
  },
});

const contentStyle = computed(() => {
  return {
    paddingTop: props.isImmerse && props.isInNavbar === false ? 0 : `${0}px`,
  };
});

onPageScroll(() => {
});
</script>

<template>
  <view id="Page" class="min-h-screen" :style="Object.assign({ backgroundColor: props.pageBgColor }, props.layoutStyle)">
    <view id="Content" :style="contentStyle">
      <slot/>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
